<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>部门管理</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<body>
<div id="mainApp">
	 <el-container>
 		<el-header style="heighe:10px;">
	  		<el-row :gutter="24">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>部门管理</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
	  		</el-row>
  		</el-header>
  		<el-main>
	  	    <el-card calss="box-card">
		  	  	<el-row :gutter="24">
			  		<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
			  			<span><h4>部门Tree</h4></span>
			  		</el-col>
			  	</el-row>
		   	</el-card>
		  	<el-card calss="box-card" style="margin-top:20px;">
		  		<el-aside width="200px"> 
			  		<el-tree
					  :data="depTreeData"
					  node-key="departmentCode"
					  :props="defaultProps"
					  @node-click="clickNode">
					</el-tree>
				</el-aside>
			</el-card>
			<el-card style="margin-top:20px;">
  				<el-button @click="showAdd" type="primary">新增</el-button>
  				<el-button @click="showModify" type="primary">修改</el-button>
  			</el-card>
  				<el-dialog title="新增部门" :visible.sync="dialogAddForm">
					<el-form ref="form" v-model="department" label-width="100px">
						<el-form-item label="上级部门编号">
							<el-input v-model="addDepartment.parentsId" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="部门编号">
							<el-input v-model="addDepartment.departmentCode"></el-input>
						</el-form-item>
						<el-form-item label="部门名称">
							<el-input v-model="addDepartment.departmentName"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
					    <el-button @click="dialogAddForm = false">取 消</el-button>
					    <el-button type="primary" @click="addNode">新增</el-button>
					</div>
				</el-dialog>
				
				<el-dialog title="修改部门" :visible.sync="dialogModifyForm">
					<el-form ref="form" v-model="department" label-width="100px">
						<el-form-item label="部门id" v-show="false">
							<el-input v-model="department.id" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="上级部门编号">
							<el-input v-model="department.parentsId" :disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="部门编号">
							<el-input v-model="department.departmentCode"></el-input>
						</el-form-item>
						<el-form-item label="部门名称">
							<el-input v-model="department.departmentName"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
					    <el-button @click="dialogModifyForm = false">取 消</el-button>
					    <el-button type="primary" @click="modifyNode">修改</el-button>
					</div>
				</el-dialog>
			
		</el-main>
	</el-container>
</div>
</body>
<script>
var app = new Vue({
		el:"#mainApp",
	    data:{
	    	depTreeData:[],
          	defaultProps: {
          		children: 'depList',
          		label: 'departmentName'
          	},
          	departmentCode:'',
          	department:'',
          	dialogAddForm:false,
          	dialogModifyForm:false,
          	addDepartment:[]
	    },
	    mounted: function (){
	    	//页面加载初始化
	    	this.findLoginUser();
	    },
	    methods: {
	      //获取用户列表
	      findLoginUser(){
	    	  var _this = this;
	    	  $.post("/sys/userinfo", function(data) {
	    		  	_this.departmentCode = data.departmentCode;
	    			_this.initDepTree();
	    	  });
		  },
	      initDepTree(){
	    	  var _this = this;
	    	  $.get("/dep/findDepartmentTree/"+this.departmentCode, function(data) {
	    		  _this.depTreeData = data;
	    	  });
	      },
		  clickNode(val){
	    	  //防止修改的部门信息时候tree跟着修改
			  var data = {};
			  data['id']=val.id;
			  data['parentsId']=val.parentsId;
			  data['departmentCode']=val.departmentCode;
			  data['departmentName']=val.departmentName;
			  this.department = data;
		  },
		  showAdd(){
			  if(this.department==null || this.department==''){
				  this.$alert('<strong>请选择部门,然后新增</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  var parentsId = this.department.departmentCode;
			 // var data ={"parentsId":parentsId,"departmentCode":"","departmentName":""};
			  var data = {};
			  data['parentsId']=parentsId;
			  data['departmentCode']="";
			  data['departmentName']="";
			  this.addDepartment=data;
			  this.dialogAddForm = true;
			  this.dialogModifyForm = false;
		  },
		  showModify(){
			  if(this.department==null || this.department==''){
				  this.$alert('<strong>请选择部门,然后修改</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  this.dialogAddForm = false;
			  this.dialogModifyForm = true;
		  },
		  addNode(){
			  var data = this.addDepartment;
			  if(data.departmentCode==null || data.departmentCode=='' || data.departmentName==null || data.departmentName==''){
				  this.$alert('<strong>必填项不能为空!</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  this.updateDep(data);
		  },
		  modifyNode(){
			  var data = this.department;
			  if(data.departmentCode==null || data.departmentCode=='' || data.departmentName==null || data.departmentName==''){
				  this.$alert('<strong>必填项不能为空!</strong>', '提示', {
			          dangerouslyUseHTMLString: true
			      });
				  return;
			  }
			  this.updateDep(data);
		  },
		  updateDep(data){
			  data = JSON.stringify(data);
			  var _this = this;
			  $.ajax({
			　　　　　　　　url:"/dep/saveDepartment",
			　　　　　　　　type:"POST",
			　　　　　　　　data:data,
						dataType: "json",
			　　　　　　　　contentType:"application/json;charset=utf-8",
			　　　　　　　　success:function(data){
			　　　　　　　　　　if("1"==data.code){
								_this.$alert('<strong>操作成功!</strong>', '提示', {
							          dangerouslyUseHTMLString: true
							    });
								_this.dialogAddForm = false;
								_this.dialogModifyForm = false;
								//操作完成重新初始化tree
								_this.initDepTree();
			　　　　　　　　　　}else{
								_this.$alert('<strong>操作失败!</strong>', '提示', {
							          dangerouslyUseHTMLString: true
							    });
			　　　　　　　　　　}
			　　　　		}
			　});
			  
		  }
	    }
	  });
</script>
</html>